<template>
    <div class="number-input">
        <div class="number-input__minus" :class="{disable: value<=min}" @click="onMinus">-</div>
        <input type="text" class="number-input__text" :value="value" @input="onInput">
        <div class="number-input__add" :class="{disable: value>=max}" @click="onAdd">+</div>

    </div>
</template>

<script>
export default{
    name:"NumberInput",
    props: {
        value: {
            type: Number,
            require: true
        },
        min: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: 99
        }  
    },
    model:{
        prop:"value",
        event:"change11"
    },
    methods: {
        onMinus(){
            if(this.value <= this.min){
                return
            }
            // 这里不能写this.value--,这样就把props的值改了
            this.$emit("change11",this.value - 1)
        },
         onAdd(){
            if(this.value >= this.max){
                return
            }
            // 这里不能写this.value++,这样就把props的值改了
            this.$emit("change11",this.value + 1)
        },
        onInput($event){
            const val = $event.target.value;
            // 判断是否是纯数字,\d是0~9，+匹配前面的子表达式一次或多次
            if(/^\d+$/.test(val) &&val >= this.min &&val <= this.max){
                this.$emit("change11",Number(val))
            }else{
                // 如果输入的值不符合就让它为之前的值
                $event.target.value = this.value
            }
        }
    }
}

</script>

<style lang="scss" scoped>
$border-color: #e0e0e0;

    .number-input {
        display: inline-flex;
        width: 175px;
        height: 52px;
        color: #747474;

        input {
            width: 55px;
            border: 1px solid $border-color;
            outline: none;
            text-align: center;
            font-size: 22px;
            padding: 0;
            box-sizing: border-box;
        }

        &__add,&__minus {
            width: 60px;
            text-align: center;
            border: 1px solid $border-color;
            line-height: 48px;
            font-size: 32px;
            cursor: pointer;
            // css控制页面文字不能被选中user-select:none;
            user-select: none;
        }

        &__add {
            border-left: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        &__minus {
            border-right: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;

        }

        .disable{
            border-color: #eee;
            color: #dcdcdc;
        }
    }
</style>